<template>
  <div :class="$style.container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>仿照美团切换城市</span>
      </div>
      <dl :class="$style.top">
        <dt>按拼音首字母选择：</dt>
       <dd>
          <span v-for="item in lists" :key="item" @click.stop="handlePositionClick('city-'+item)">{{item}}</span>
       </dd>
      </dl>
      <dl v-for="item in cityList" :key="item.title" :class="$style.list">
        <dt :id="'city-'+item.title">{{item.title}}</dt>
        <dd>
          <span v-for="subItem in item.children" :key="subItem.code">{{subItem.name}}</span>
        </dd>
      </dl>
    </el-card>
  </div>
</template>
<script>
import data from "../../../../assets/json/city";
import pinyin from 'js-pinyin'
export default {
  data() {
    return {
      cityList: [],
      lists:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let cityList = []
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].cityList.length; j++) {
          let item = data[i].cityList[j];
          cityList.push({
            code: item.code,
            name: item.name
          });
        }
      }

     let arr = cityList.map(item => {
       item.pinyin = pinyin.getFullChars(item.name).toLocaleUpperCase().substring(0,1) 
       return item
     }).sort(function(a,b) {
       return a.pinyin.charCodeAt(0) -b.pinyin.charCodeAt(0)
     })   
     let obj = {}
     for (let i = 0; i< arr.length; i++) {
       let item = arr[i]
        if (!obj[item.pinyin]) {
          obj[item.pinyin] = []
        } 
        obj[item.pinyin].push(item)
     }

     let brr = []
     for (let key in obj) {
       brr.push({
         title: key,
         children: obj[key]
       })
     }
     this.cityList = brr
    
    },
    // 实现锚点定位
    handlePositionClick (id) {
      let dom = document.getElementById(id)
      let distance = dom ? dom.offsetTop - 120 : 0

      if (distance > 0) {
        document.getElementById("scroll").scrollTop = distance
      }
    }
  }
};
</script> 
<style lang="scss" module>
.container {
  padding: 20px;
  .top {
    &:after {
      display: block;
      content: ' ';
      overflow: hidden;
      clear: both;
    }
    dt {
      float: left;
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }
    dd {
      span {
        display: inline-block;
        font-size: 15px;
        color: #666;
        display: inline-block;
        margin: 0 10px;
        width: 25px;
        height: 25px;
        padding-top: 2px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border-radius: 50%;
        &:hover {
          background: #F8F8F8;
        }
      }
    }
  }
  .list {
    padding: 13px 30px 13px 10px;
    border-radius: 10px;
    &:after {
      display: block;
      content: ' ';
      overflow: hidden;
      clear: both;
    }
    dt {
      float:left;
      box-sizing: border-box;
      vertical-align: top;
      padding-top: 10px;
      display: inline-block;
      text-align: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #fff;
      background: #13D1BE;
      box-shadow: 0 4px 5px 0 rgba(39,178,164,.22);
    }
    dd {
      overflow: hidden;
      span {
        margin: 10px 20px;
        color: #666;
        display: inline-block;
        font-size: 14px;
      }
    }
  }
}
</style>
